import React, { useEffect, useState } from "react";
import './index.less';
import LazyLoad from 'react-lazyload';
import { Table } from 'antd';
import { enquireScreen } from 'enquire-js';

const Pricing = ({ dataSource, ...props }) => {
  const [isMobile, setIsMobile] = useState(false);
  useEffect(() => {
    // 适配手机屏幕;
    enquireScreen((b) => {
      setIsMobile(!!b);
    });
  }, []);
  const { ...currentProps } = props;
  delete currentProps.dataSource;
  const columnsTable1 = [
    {
      title: '计费规则',
      dataIndex: 'title',
      key: 'title',
      align: 'center',
    },
  ];
  const columnsTable2 = [
    {
      title: '存储类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
    {
      title: 'OBS标准存储',
      dataIndex: 'obs',
      key: 'obs',
      align: 'center',
    },
  ];
  const columnsTable3 = (type) => [
    {
      title: '类型',
      dataIndex: 'type',
      key: 'type',
      align: 'center',
    },
    {
      title: 'Size',
      dataIndex: 'size',
      key: 'size',
      align: 'center',
    },
    {
      title: 'vCPUs',
      dataIndex: 'vCPUs',
      key: 'vCPUs',
      align: 'center',
    },
    {
      title: () => {
        return (
          <div>
            <p>系统盘</p>
            <p>(通用型SSD)</p>
          </div>
        )
      },
      dataIndex: 'systemDisk',
      key: 'systemDisk',
      align: 'center',
      width: 150,
    },
    {
      title: () => {
        return (
          <div>
            <p>缓存盘</p>
            <p>(通用型SSD)</p>
          </div>
        )
      },
      dataIndex: 'cacheDisk',
      key: 'cacheDisk',
      align: 'center',
      width: 150,
    },
    {
      title: type === 1 ? '基准/最大带宽':'网络',
      dataIndex: 'maxBroadband',
      key: 'maxBroadband',
      align: 'center',
    },
    {
      title: '内网收发包',
      dataIndex: 'pps',
      key: 'pps',
      align: 'center',
    },
    {
      title: '价格/小时(元)',
      dataIndex: 'price',
      key: 'price',
      align: 'center',
    },
  ];

  const tableData1 = [
    {
      key: '0',
      title: '总费用=存储+计算',
    },
  ];
  const tableData2 = [
    {
      key: '0',
      type: '华为云OBS存储',
      obs: '0.12元/GB/月，按存储使用量计费',
    },
  ];
  const tableData3 = [
    {
      key: '0',
      type: '通用型',
      size: 'XXS',
      vCPUs: '4',
      systemDisk: '100G',
      cacheDisk: '200G*4',
      maxBroadband: '最大8Gbit/s',
      pps: '800,000',
      price: '3.211',
    },
    {
      key: '1',
      type: '通用型',
      size: 'XS',
      vCPUs: '8',
      systemDisk: '100G',
      cacheDisk: '200G*4',
      maxBroadband: '最大15Gbit/s',
      pps: '1,500,000',
      price: '5.2858',
    },
    {
      key: '2',
      type: '通用型',
      size: 'S',
      vCPUs: '12',
      systemDisk: '100G',
      cacheDisk: '300G*4',
      maxBroadband: '最大17Gbit/s',
      pps: '2,000,000',
      price: '7.8663',
    },
    {
      key: '3',
      type: '通用型',
      size: 'M',
      vCPUs: '16',
      systemDisk: '100G',
      cacheDisk: '300G*4',
      maxBroadband: '最大20Gbit/s',
      pps: '2,800,000',
      price: '9.9411',
    },
    {
      key: '4',
      type: '通用型',
      size: 'L',
      vCPUs: '24',
      systemDisk: '100G',
      cacheDisk: '400G*4',
      maxBroadband: '最大25Gbit/s',
      pps: '4,000,000',
      price: '14.5977',
    },
    {
      key: '5',
      type: '通用型',
      size: 'XL',
      vCPUs: '32',
      systemDisk: '100G',
      cacheDisk: '400G*4',
      maxBroadband: '最大30Gbit/s',
      pps: '5,500,000',
      price: '16.6686',
    },
    {
      key: '6',
      type: '通用型',
      size: 'XXL',
      vCPUs: '48',
      systemDisk: '100G',
      cacheDisk: '500G*4',
      maxBroadband: '最大35Gbit/s',
      pps: '7,500,000',
      price: '27.5548',
    },
    {
      key: '7',
      type: '通用型',
      size: 'XXXL',
      vCPUs: '64',
      systemDisk: '100G',
      cacheDisk: '500G*4',
      maxBroadband: '最大36Gbit/s',
      pps: '10,000,000',
      price: '35.8566',
    },
  ];
  const tableData4 = [
    {
      key: '0',
      type: '内存型',
      size: 'XXS',
      vCPUs: '4',
      systemDisk: '100G',
      cacheDisk: '200G*4',
      maxBroadband: '2.4/8 Gbit/s',
      pps: '800,000',
      price: '3.3059',
    },
    {
      key: '1',
      type: '内存型',
      size: 'XS',
      vCPUs: '8',
      systemDisk: '100G',
      cacheDisk: '200G*4',
      maxBroadband: '4.5/15 Gbit/s',
      pps: '1,500,000',
      price: '5.5549',
    },
    {
      key: '2',
      type: '内存型',
      size: 'S',
      vCPUs: '12',
      systemDisk: '100G',
      cacheDisk: '300G*4',
      maxBroadband: '7/17 Gbit/s',
      pps: '2,000,000',
      price: '8.2693',
    },
    {
      key: '3',
      type: '内存型',
      size: 'M',
      vCPUs: '16',
      systemDisk: '100G',
      cacheDisk: '300G*4',
      maxBroadband: '9/20 Gbit/s',
      pps: '2,800,000',
      price: '10.4793',
    },
    {
      key: '4',
      type: '内存型',
      size: 'L',
      vCPUs: '24',
      systemDisk: '100G',
      cacheDisk: '400G*4',
      maxBroadband: '14/25 Gbit/s',
      pps: '4,000,000',
      price: '15.4037',
    },
    {
      key: '5',
      type: '内存型',
      size: 'XL',
      vCPUs: '32',
      systemDisk: '100G',
      cacheDisk: '400G*4',
      maxBroadband: '18/30 Gbit/s',
      pps: '5,500,000',
      price: '19.8107',
    },
    {
      key: '6',
      type: '内存型',
      size: 'XXL',
      vCPUs: '64',
      systemDisk: '100G',
      cacheDisk: '500G*4',
      maxBroadband: '36/40 Gbit/s',
      pps: '10,000,000',
      price: '37.9821',
    },
  ];

  return (
    <div className="about">
      <div className="pricing-banner">
        <div className='banner-text-wrapper'>
          <div className="banner-inner">
            <p className="banner-title">
              弹性计算云定价
            </p>
            <p className="banner-describe">
              根据用户业务需求和预设，自动调整存算资源，灵活高性价比
            </p>
          </div>
        </div>
      </div>
      <div className="cost-content">
        <div className="cost-inner">
          <div className="cost-list">
            <div className="cost-title">计费模式</div>
            <div className="cost-table">
              <Table 
                className='pricing-table' 
                size='small'
                columns={columnsTable1} 
                dataSource={tableData1} 
                pagination={false}
              />
            </div>
            <p className="pricing-tips">*最终价格以客户经理沟通为准</p>
          </div>
          <div className="cost-list">
            <div className="cost-title">存储计费</div>
            <div className="cost-table">
              <Table 
                className='pricing-table' 
                columns={columnsTable2} 
                size='small'
                dataSource={tableData2} 
                pagination={false}
              />
            </div>
          </div>
          <div className="cost-list">
            <div className="cost-title">计算计费</div>
            <div className="cost-table">
              <Table 
                className='pricing-table' 
                columns={columnsTable3(1)}
                size='small'
                dataSource={tableData3} 
                pagination={false}
                scroll={{x: 'max-content'}}
                rowClassName={(record, index) => 
                  (index % 2) === 0 ? 'row':'stripe'
                }
              />
            </div>
          </div>
          <div className="cost-list" style={{paddingBottom:0}}>
            <div className="cost-table">
              <Table 
                className='pricing-table' 
                columns={columnsTable3(2)} 
                dataSource={tableData4} 
                size='small'
                scroll={{x: 'max-content'}}
                pagination={false}
                rowClassName={(record, index) => 
                  (index % 2) === 0 ? 'row':'stripe'
                }
              />
            </div>
          </div>
        </div>
      </div>
    </div>
  );
};

export default Pricing;
